﻿<template>
  <el-dialog v-drag title = '编辑脚本' :visible.sync = 'dialogVisible' width = "60%"
  append-to-body  class = 'md_dialog' @close = "closeDialog">
    <div v-loading = 'loading' element-loading-text = '数据加载中...'>
      <div id = 'editorId' ref = 'myEditor'></div>
      <div style= 'text-align: center;margin-top:10px;'>
        <el-button type = 'primary' @click = 'saveBtnClick'>保存</el-button>
        <el-button type = 'primary' v-if = 'showCompiled' @click = 'saveAndCompiled'>保存并编译</el-button>
        <el-button type = 'primary' v-if = 'showCompiled' @click = 'tryRunMethod'>运行脚本</el-button>
      </div>
    </div>
    <!-- 运行结果的弹窗 -->
    <Host-Js-Result-Dialog :showReusltDialog = 'resultDialog.showDialog'
    :defaultValue = 'resultDialog.resultValue' @closeResultDialog = 'resultDialog.showDialog = false'></Host-Js-Result-Dialog>
  </el-dialog>
</template>

<script>
import ace from 'ace-builds'
import 'ace-builds/webpack-resolver' // 在 webpack 环境中使用必须要导入
import 'ace-builds/src-noconflict/theme-monokai' // 默认设置的主题
import 'ace-builds/src-noconflict/mode-javascript' // 默认设置的语言模式
import HostJsResultDialog from './HostJsResultDialog.vue'
export default {
  props: ['showEditDialog', 'defaultValue', 'hostName', 'showCompiled'],
  components: {
    HostJsResultDialog
  },
  data () {
    return {
      dialogVisible: false,
      loading: false,
      currentValue: '',
      editor: null,
      // 打开运行结果的弹窗
      resultDialog: {
        showDialog: false,
        resultValue: null
      }
    }
  },
  methods: {
    tryRunMethod () {
      if (!this.hostName) {
        this.$message({
          message: '没有获取到该脚本的名称',
          type: 'warning'
        })
        return
      }
      this.loading = true
      this.$get('/hj/compiled/content', {
        name: this.hostName
      }).then(data => {
        let dataResult = data.data.result
        if (dataResult.code === 'success' && dataResult.data.content) {
          this.$post('/hj/tryrun', {
            content: dataResult.data.content
          }).then(data => {
            let dataResult = data.data.result
            if (dataResult.code === 'success') {
              this.resultDialog.showDialog = true
              this.resultDialog.resultValue = encodeURIComponent(JSON.stringify(dataResult.data.run_result))
            } else {
              this.$message({
                message: dataResult.msg,
                type: 'warning'
              })
            }
            this.loading = false
          }).catch((error) => {
            this.$message({
              message: error,
              type: 'error'
            })
          })
        } else {
          this.$message({
            message: dataResult.msg,
            type: 'warning'
          })
          this.loading = false
        }
      }).catch((error) => {
        this.$message({
          message: error,
          type: 'error'
        })
        this.loading = false
      })
    },
    // 保存的方法
    saveBtnClick () {
      let val = this.editor.getSession().getValue()
      if (!val) {
        this.$message({
          message: '请输入脚本内容',
          type: 'warning'
        })
        return
      }
      this.loading = true
      this.$post('/hj/save', {
        name: this.hostName,
        content: val
      }).then(data => {
        let dataResult = data.data.result
        if (dataResult.code === 'success') {
          this.$message({
            message: '保存成功!',
            type: 'success'
          })
        } else {
          this.$message({
            message: dataResult.msg,
            type: 'warning'
          })
        }
        this.loading = false
      }).catch((error) => {
        this.$message({
          message: error,
          type: 'error'
        })
        this.loading = false
      })
    },
    // 保存并编译的方法
    saveAndCompiled () {
      let val = this.editor.getSession().getValue()
      if (!val) {
        this.$message({
          message: '请输入脚本内容',
          type: 'warning'
        })
        return
      }
      this.loading = true
      this.$post('/hj/save_compile', {
        name: this.hostName,
        content: val
      }).then(data => {
        let dataResult = data.data.result
        if (dataResult.code === 'success') {
          this.$message({
            message: '保存并编译成功!',
            type: 'success'
          })
        } else {
          this.$message({
            message: dataResult.msg,
            type: 'warning'
          })
        }
        this.loading = false
      }).catch((error) => {
        this.$message({
          message: error,
          type: 'error'
        })
        this.loading = false
      })
    },
    // 初始化页面的方法
    initPage () {
      let _self = this
      _self.currentValue = _self.defaultValue ? decodeURIComponent(_self.defaultValue) : ''
      _self.loading = true
      _self.editor = ace.edit(_self.$refs.myEditor, {
        fontSize: 14,
        tabSize: 4,
        theme: 'ace/theme/monokai',
        mode: 'ace/mode/javascript',
        enableSnippets: true,
        enableLiveAutocompletion: true,
        enableBasicAutocompletion: true,
        value: _self.currentValue
      })
      _self.loading = false
    },
    closeDialog () {
      this.$emit('closeEditDialog')
    }
  },
  destroyed () {
    let _self = this
    if (_self.editor) {
      _self.editor.destroy()
      _self.editor = null
    }
  },
  watch: {
    // 弹窗打开的方法
    showEditDialog: {
      handler: function (val, oldVal) {
        this.dialogVisible = val
        if (val) {
          this.$nextTick(() => {
            this.initPage()
          })
        } else {
          let _self = this
          if (_self.editor) {
            _self.editor.destroy()
            _self.editor = null
          }
        }
      },
      deep: true
    }
  }
}
</script>

<style lang = "scss">
#editorId {
  width:100%;
  height: 660px;
}
@media (max-width:1367px) {
  #editorId {
    height: 400px;
  }
}
</style>
